<template>
    <scroll-view  scroll-y class="hotel-list" :style="[{ maxHeight: viewHeight + 'px;' }]">
        <view class="hotel-more-box" v-for="(item,index) in 2" :key="index">
            <view class="hotel-box">
                <image class="hotel-img"
                    src="https://cdn3.visiotrip.com/default/jpg/20220428/1400821725.jpg?x-oss-process=style/standard"
                    mode="aspectFill" />
                <view class="info-box">
                    <view class="name-box">
                        <view class="hotel-name">山景双床房</view>
                        <view class="more"></view>
                    </view>
                    <view class="hotel-text"> 2张1.35米双人床 2人入住 42平米 部分禁烟 </view>
                    <view class="bottom-box">
                        <view class="sale-number"></view>
                        <view class="bottom-box-right">
                            <view class="price-box">
                                <view class="sell-box">
                                    <view class="mark-1">
                                        ¥350
                                    </view>
                                    <text class="sell-1">￥</text>
                                    <text class="sell-2">349</text>
                                    <text class="sell-3">起</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="detail-box" v-for="(item, index) in 2" :key="index">
                <view class="detail-title">2份早餐 | 有条件取消</view>
                <view class="detail-info">
                    <image class="detail-img"
                        src="https://cdn3.visiotrip.com/default/jpg/20220428/1400821725.jpg?x-oss-process=style/standard"
                        mode="aspectFill" />
                    <view class="detail-text">2大1小不限次数森林温泉1份/天</view>
                </view>
                <view class="bottom-box">
                    <view class="sale-number"></view>
                    <view class="bottom-box-right">
                        <view class="price-box">
                            <view class="sell-box">
                                <view class="mark-1">
                                    ¥350
                                </view>
                                <text class="sell-1">￥</text>
                                <text class="sell-2">349</text>
                                <text class="sell-3">起</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="open-more">
                查看更多3个<uni-icons type="bottom" color="#666666" size="14"></uni-icons>
            </view>

        </view>
        <noMore></noMore>
    </scroll-view>
</template>

<script>
import noMore from "../noMore/noMore.vue"
export default {
    props: {
        viewHeight: {
            type: String,
        }
    },
    components: {
        noMore
    },
    computed: {},
    data() {
        return {

        };
    },
    onLoad() { },
    methods: {

    }
};
</script>

<style lang="scss" scoped>
.hotel-list {
    width: 702rpx;
    margin: 0 auto;

    .hotel-more-box {
        width: 702rpx;
        min-height: 622rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(156, 178, 211, 0.27);
        border-radius: 30rpx;
        margin-bottom: 16rpx;
    }

    .hotel-box {
        width: 702rpx;
        min-height: 212rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(156, 178, 211, 0.27);
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        padding: 0 16rpx;

        .hotel-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 15rpx;
            overflow: hidden;
        }

        .info-box {
            flex: 1;
            padding-left: 16rpx;
            height: 160rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .name-box {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .hotel-name {
                    font-size: 32rpx;
                    color: $sl-color-grey;
                }

                .more {
                    width: 27rpx;
                    height: 27rpx;
                    border-radius: 50%;
                    border: 1rpx solid $sl-color-grey;
                    background: $sl-color-grey;
                }
            }

            .hotel-text {
                font-size: 24rpx;
                color: $sl-color-grey;
            }
        }
    }

    .detail-box {
        width: 667rpx;
        margin: 0 auto;
        height: 236rpx;
        border-bottom: 1rpx solid #CCCCCC;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .detail-title {
            font-size: 28rpx;
            color: $sl-color-grey;
            // padding: 18rpx 0;
            font-weight: 500;
        }

        .detail-info {
            width: 100%;
            height: 89rpx;
            background: linear-gradient(135deg, #FFFAF7 0%, #FFF2EC 100%);
            display: flex;
            align-items: center;

            .detail-img {
                width: 81rpx;
                height: 81rpx;
                border-radius: 10rpx;
            }

            .detail-text {
                padding-left: 30rpx;
                font-size: 24rpx;
                color: $sl-color-grey;
            }
        }
    }
}

.bottom-box {
    display: flex;
    justify-content: space-between;

    .bottom-box-right {
        width: 250rpx;
        display: flex;
        justify-content: flex-end;

        .price-box {
            text-align: right;

            .sell-box {
                padding: 0 11rpx;
                display: flex;
                align-items: baseline;

                .mark-1 {
                    font-size: 20rpx;
                    color: #999999;
                    text-decoration: line-through;
                }

                .sell-1 {
                    font-size: 24rpx;
                    color: #FF4F01;
                }

                .sell-2 {
                    color: #FF4F01;
                    font-size: 36rpx;
                }

                .sell-3 {
                    color: #999999;
                    font-size: 20rpx;
                }
            }
        }
    }
}
.open-more{
    height: 87rpx;
    width: 667rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $sl-color-grey;
    font-size: 24rpx;
}
</style>
